<template>
    <div class="header-info">
        <div class="operation">
            <span>
                <el-icon>
                    <Message />
                </el-icon>
            </span>
            <span>
                <el-icon>
                    <ChatDotRound />
                </el-icon>
            </span>
            <span>
                <el-icon>
                    <Search />
                </el-icon>
            </span>
        </div>
    </div>
    <div class="info">
        <el-dropdown>
            <span class="user-info">
                <el-avatar :size="30"
                    src="https://img1.baidu.com/it/u=728383910,3448060628&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" />
                <span class="name">来风</span>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item divided @click="handleExitClick">
                        <el-icon>
                            <CircleClose />
                        </el-icon>
                        <span>退出系统</span>
                    </el-dropdown-item>
                    <el-dropdown-item divided>
                        <el-icon>
                            <InfoFilled />
                        </el-icon>
                        <span>个人信息</span>
                    </el-dropdown-item>
                    <el-dropdown-item divided>
                        <el-icon>
                            <Unlock />
                        </el-icon>
                        <span>修改密码</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { localCache } from '@/utils/cache';
import { ChatDotRound, Message, Search, Unlock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
const router = useRouter()
function handleExitClick() {
    localCache.removeCache("token")
    router.push('/login')
}


</script>

<style lang="less" scoped>
.header-info {
    display: flex;
    align-items: center;
}

.operation {
    display: inline-flex;
    margin-right: 20px;

    span {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 35px;
    }

    &:hover {
        background: antiquewhite;
    }

    i {
        font-size: 20px;
    }

    .dot {
        position: absolute;
        top: 3px;
        right: 3px;
        z-index: 10;
        width: 6px;
        height: 6px;
        background-color: red;
        border-radius: 100%;
    }

}

.info {
    .user-info {
        display: flex;
        align-items: center;
    }

    .name {
        margin-left: 5px;
    }
}

.info {
    :global(.el-dropdown-menu_item) {
        line-height: 36px !important;
        padding: 6px 22px
    }
}
</style>